<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>自定义过滤器</title>

</head>

<body>
  <div id="app" v-cloak>
    <p>{{msg}}</p>
    <p> {{msg | strpj}}</p>
    <p>{{msg | rpl}}</p>
  </div>
  <hr>
  <!--第二个 -->
  <div id="app2" v-cloak>
    <p>{{msg}}</p>
    <p> {{msg | strpj}}</p>
  </div>

  <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
  <script>
    /**
     * 全局过滤器语法：
     * Vue.filter('pj',function(val) {}) 
     * 使用场景：格式化胡子语法绑定的数据
     */
    // 字符串拼接全局过滤器
    /**
     * val => 获取胡子语法绑定的值
     */
    Vue.filter('strpj', function (val) {
      console.log(val)
      return val + '猛哥！'
    })
    const vm = new Vue({
      el: '#app',
      data: {
        msg: 'hi vue!'
      },
      // 定义局部过滤器
      filters: {
        // 字符串替换
        rpl(val) {
          return val.replace('vue', 'react')
        }
      }
    })

    const vm2 = new Vue({
      el: '#app2',
      data: {
        msg: 'hi vue2!'
      }
    })
  </script>
</body>

</html>